@use '../Variables.scss';

.MuiDrawer-root {
  height: 100vh;
  transition: margin-left 0.3s ease;
  .MuiPaper-root {
    position: relative;
    z-index: 5;
    .MuiTabs-root {
      height: auto;
      overflow: visible;
      .MuiTabs-flexContainer {
        button {
          min-width: 7em;
          min-height: auto;
          padding: 0.75em 1.5em;
          font-size: 0.8em;
          text-transform: none;
          svg {
            font-size: 1.5em;
          }
          .reset {
            font-size: 1.25em;
            position: absolute;
            right: 0em;
            bottom: 0em;
            color: Variables.$dark-grey;
          }
        }
      }
      .MuiTabs-indicator {
        top: 0;
        height: 0.2em;
      }      
    }
  }
  .drawerHandle {
    width: 0.3em;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    cursor: ew-resize;
  }
  &.open {
    min-width: 19em;
  }
}

.disableAnimations #drawer {
  transition: none;
}

.compact {
  #drawer {
    #Attributes {
      .filter:not([data-todotxt-attribute='priority']) button {
        padding: 0.4em;
      }
    }
  }
}

.dark {
  #drawer {
    .MuiPaper-root {
      .MuiTabs-flexContainer {
        button {
          .reset {
            color: Variables.$light-grey;
          }
        }
      }
    }
  }
}
